<template>
  <div>
    <el-button @click="getPageData()">获取数据</el-button>
    <div id="x-spreadsheet-demo" />
  </div>

</template>

<script>

// import Spreadsheet from "x-data-spreadsheet";
// import zhCN from "x-data-spreadsheet/dist/locale/zh-cn";
// Spreadsheet.locale("zh-cn", zhCN);

import 'x-data-spreadsheet/dist/xspreadsheet.css' // 必须导入样式
// 引入依赖包
import zhCN from 'x-data-spreadsheet/src/locale/zh-cn'
import Spreadsheet from 'x-data-spreadsheet'
// 设置中文
Spreadsheet.locale('zh-cn', zhCN)
export default {
  name: 'ExcelExper',
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      const xs = new Spreadsheet('#x-spreadsheet-demo', {
        mode: 'edit', // edit | read 只读和可编辑模式切换
        showToolbar: true,
        customToolbar:false,
        // toolbarConfig:{
        //   edit:{
        //     undo:true,
        //     redo:true
        //   },
        //   view:{
        //     formula:true,
        //   }
        // },
        toolbar: {
          items: [
            // 内置按钮组（撤销/重做）
            // { key: 'undo', text: '撤销', icon: 'fa fa-undo' },
            // { key: 'redo', text: '重做', icon: 'fa fa-redo' },
            // { type: 'separator' }, // 分隔线

            // 字体相关按钮
            { key: 'font', text: '字体', icon: 'fa fa-font' },
            { key: 'fontSize', text: '字号', icon: 'fa fa-text-height' },
            { type: 'separator' }

            // // 对齐方式按钮
            // { key: 'alignLeft', text: '左对齐', icon: 'fa fa-align-left' },
            // { key: 'alignCenter', text: '居中', icon: 'fa fa-align-center' },
            // { key: 'alignRight', text: '右对齐', icon: 'fa fa-align-right' },
            // { type: 'separator' },

            // // 数据操作按钮
            // { key: 'clear', text: '清除内容', icon: 'fa fa-eraser' },
            // { key: 'del', text: '删除行列', icon: 'fa fa-trash' },
            // { type: 'separator' },

          ]
        },
        showBottomBar: false, // 底部工具栏显示true与隐藏false
        showGrid: true, // 内容区域网格显示状态
        showContextmenu: true,  // 切换右键菜单显示状态
        contextmenu: {
          items: [
          // 保留复制、粘贴功能（使用内置行为）
          {
            key: 'copy',
            text: '复制',
            icon: 'fa fa-copy',
            title: '复制选中内容（Ctrl+C）'
          },
          {
            key: 'paste',
            text: '粘贴',
            icon: 'fa fa-paste',
            title: '粘贴剪贴板内容（Ctrl+V）'
          },
          { type: 'separator' }, // 添加分隔线（替代全局 separator）



        ],
        },


        view: {
          height: () => document.documentElement.clientHeight,
          width: () => document.documentElement.clientWidth
        },
        // 调整行的高度和默认展示数量
        row: {
          len: 100,
          height: 25
        },
        // 可以调整默认显示的列数 len，A-Z，默认每个列的宽度 width ，
        // 左边序列栏默认宽度 indexWidth ，以及每个列默认最小宽度 minWidth
        col: {
          len: 26,
          width: 100,
          indexWidth: 60,
          minWidth: 60
        },
        // 修改字体的背景颜色和内容
        style: {
          // 背景颜色
          bgcolor: '#ffffff',
          // 水平对齐方式
          align: 'left',
          // 垂直对齐方式
          valign: 'middle',
          // 是否需要换行
          textwrap: false,
          // 虚线边框
          strike: false,
          // 下画线
          underline: true,
          // 文字颜色
          color: '#0a0a0a',
          // 字体设置
          font: {
            // 字体
            name: '宋体',
            // 字号大小
            size: 10,
            // 是否加粗
            bold: false,
            // 斜体
            italic: false
          }
        }
      })
        .loadData({})
        .change((data) => {
          // 列表数据改变时触发
          console.log(data)
        })
      xs.validate()
    },
    getPageData() {
      const dataEX = new Spreadsheet('#x-spreadsheet', {

      })
      console.log(dataEX, 'dataEXdataEXdataEX')
    }
  }

}

</script>
<style lang="less" scoped>
.x-spreadsheet-toolbar { display: block !important; }
</style>

